<template>
  <div class="pagination-wrapper">
    <div class="pagination-total" v-if="showTotal">
      {{ t('common.pagination.total') }} {{ total }} {{ t('common.pagination.items') }}
    </div>
    
    <a-pagination
      v-bind="$attrs"
      :total="total"
      :current="current"
      :pageSize="pageSize"
      :showSizeChanger="showSizeChanger"
      :showQuickJumper="false"
      @change="handleChange"
      @showSizeChange="handleSizeChange"
      class="pagination-component"
    />
    
    <!-- 自定义跳转区域 -->
    <div v-if="showQuickJumper" class="pagination-jumper">
      <span>{{ t('common.pagination.goTo') }}</span>
      <a-input-number
        v-model:value="jumpPage"
        :min="1"
        :max="Math.ceil(total / pageSize)"
        size="small"
        class="pagination-input"
        @pressEnter="handleJump"
      />
      <span>{{ t('common.pagination.page') }}</span>
      <a-button size="small" class="pagination-button" @click="handleJump">
        {{ t('common.pagination.goTo') }}
      </a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { ref, watch } from 'vue'

defineOptions({
  name: 'Pagination',
  inheritAttrs: false
})

const props = withDefaults(defineProps<{
  total: number
  current: number
  pageSize: number
  showSizeChanger?: boolean
  showQuickJumper?: boolean
  showTotal?: boolean
}>(), {
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: true
})

const emit = defineEmits<{
  (e: 'change', page: number, pageSize: number): void
  (e: 'update:current', page: number): void
  (e: 'update:pageSize', pageSize: number): void
}>()

const { t } = useI18n()

// 跳转页码
const jumpPage = ref<number>(props.current)

// 当current属性变化时，更新jumpPage
watch(() => props.current, (newVal) => {
  jumpPage.value = newVal
})

const handleChange = (page: number, pageSize: number) => {
  jumpPage.value = page
  emit('change', page, pageSize)
  emit('update:current', page)
}

const handleSizeChange = (current: number, size: number) => {
  emit('change', current, size)
  emit('update:pageSize', size)
}

// 处理跳转
const handleJump = () => {
  if (jumpPage.value && jumpPage.value !== props.current) {
    handleChange(jumpPage.value, props.pageSize)
  }
}
</script>

<style lang="scss" scoped>
.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 16px 0;
  padding-right: 16px;
  flex-wrap: wrap;
  
  @media (max-width: 768px) {
    justify-content: center;
    padding-right: 0;
  }
  
  .pagination-total {
    margin-right: 16px;
    color: rgba(0, 0, 0, 0.65);
    
    @media (max-width: 576px) {
      width: 100%;
      margin-right: 0;
      margin-bottom: 8px;
      text-align: center;
    }
  }
  
  .pagination-component {
    // 样式会继承全局定义的分页样式
  }
  
  .pagination-jumper {
    display: flex;
    align-items: center;
    margin-left: 16px;
    
    @media (max-width: 576px) {
      margin-left: 0;
      margin-top: 8px;
      width: 100%;
      justify-content: center;
    }
    
    span {
      margin: 0 8px;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      
      &:first-child {
        margin-left: 0;
      }
    }
    
    .pagination-input {
      width: 50px;
      margin: 0 8px;
      height: 32px;
      
      :deep(.ant-input-number-input) {
        height: 30px;
        padding: 0 8px;
        text-align: center;
      }
      
      :deep(.ant-input-number-handler-wrap) {
        display: none;
      }
      
      @media (max-width: 576px) {
        width: 40px;
      }
    }
    
    .pagination-button {
      margin-left: 8px;
      height: 32px;
      padding: 0 8px;
      border-radius: 6px;
      background-color: #1890ff;
      color: #fff;
      border-color: #1890ff;
      
      &:hover, &:focus {
        background-color: #40a9ff;
        border-color: #40a9ff;
      }
      
      &:active {
        background-color: #096dd9;
        border-color: #096dd9;
      }
    }
  }
}
</style> 